<template>
  <div class="course-calendar-container">
    <vab-query-form>
      <el-form :model="formData" @submit.native.prevent>
        <el-form-item label="查看班级">
          <el-radio-group v-model="formData.className" size="small">
            <el-radio-button
              v-for="item in classList"
              :key="item.id"
              :label="item.className"
            >
              {{ item.className }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="课程类型">
          <el-radio-group v-model="formData.courseTypeId" size="small">
            <el-radio-button
              v-for="item in courseTypeList"
              :key="item.id"
              :label="item.id"
            >
              {{ item.className }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示字段">
          <el-checkbox-group v-model="formData.fieldList" size="small">
            <el-checkbox-button
              v-for="item in fieldList"
              :key="item"
              :label="item"
            >
              {{ item }}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </vab-query-form>

    <WeeklyCalendar
      :class-name="formData.className"
      :course-type-id="formData.courseTypeId"
      :field-list="formData.fieldList"
    />
  </div>
</template>

<script>
  import { getCourseTypeByPage } from '@/apis/courseType'
  import { getClassByPage } from '@/apis/class'
  import WeeklyCalendar from '@/components/WeeklyCalendar'

  export default {
    name: 'Calendar',
    components: {
      WeeklyCalendar,
    },
    data() {
      return {
        formData: {
          className: null,
          courseTypeId: null,
          fieldList: ['时间', '老师', '次数', '学员'],
        },
        classList: [],
        courseTypeList: [],
        fieldList: ['时间', '老师', '次数', '学员'],
      }
    },
    created() {
      getClassByPage().then(({ list }) => {
        this.classList = list
      })

      getCourseTypeByPage().then(({ list }) => {
        this.courseTypeList = list
      })
    },
  }
</script>
